<template>
  <div>
    <p class="module-name">
      <span class="iconfont icon icon-tradition" v-if="this.moduleName==='传统医学'" @click="goModule('/traditionalMedical')">&#xe625;</span>
      <span class="iconfont icon icon-modern" v-if="this.moduleName==='现代医学'" @click="goModule('/modernMedical')">&#xe676;</span>
      <span v-if="this.moduleName==='传统医学'" @click="goModule('/traditionalMedical')">{{ moduleName }}</span>
      <span v-if="this.moduleName==='现代医学'" @click="goModule('/modernMedical')">{{ moduleName }}</span>
      </p>
    <MedicalModule moduleName="指导思想" v-if="this.moduleName==='现代医学'" catalogue="17" :picSrc="require('@/assets/images/modernMedicalGuide.png')" routeName="/modernmedical/guide" :List="GList"/>
    <MedicalModule moduleName="指导思想" v-if="this.moduleName==='传统医学'" catalogue="21" :picSrc="require('@/assets/images/traditionalMedicalGuide.jpg')" routeName="/traditionalmedical/guide" :List="GList"/>
    <MedicalModule moduleName="诊断方法" v-if="this.moduleName==='现代医学'" catalogue="18" :picSrc="require('@/assets/images/modernMedicalDiagnosis.png')" routeName="/modernmedical/diagnosis" :List="DList"/>
    <MedicalModule moduleName="诊断方法" v-if="this.moduleName==='传统医学'" catalogue="22" :picSrc="require('@/assets/images/traditionalMedicalDiagnosis.jpg')" routeName="/traditionalmedical/diagnosis" :List="DList"/>
    <MedicalModule moduleName="治疗方法" v-if="this.moduleName==='现代医学'" catalogue="19" :picSrc="require('@/assets/images/modernMedicalTreatment.jpg')" routeName="/modernmedical/treatment" :List="TList"/>
    <MedicalModule moduleName="治疗方法" v-if="this.moduleName==='传统医学'" catalogue="23" :picSrc="require('@/assets/images/traditionalMedicalTreatment.jpg')" routeName="/traditionalmedical/treatment" :List="TList"/>
    <MedicalModule moduleName="康复指南" v-if="this.moduleName==='现代医学'" catalogue="20" :picSrc="require('@/assets/images/modernMedicalNurse.jpg')" routeName="/modernmedical/nurse" :List="NList"/>
    <MedicalModule moduleName="养生保健" v-if="this.moduleName==='传统医学'" catalogue="24" :picSrc="require('@/assets/images/traditionalMedicalNurse.jpg')" routeName="/traditionalmedical/nurse" :List="NList"/>
    <!-- <ul class="module-small">
      <span class="module-small-title">康养策略</span>
      <el-row class="module-small-content-out">
        <el-col :span="10">
          <div class="grid-content">
            <img src="../assets/images/logo.jpg" class="medical-img" />
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content">
            <div class="child">
              <span class="iconfont icon-point">&#xe757;</span>
              <p class="module-small-content-title">
                我在马路边捡到一分钱，把它交给
              </p>
            </div>
            <div class="child">
              <span class="iconfont icon-point">&#xe757;</span>
              <p class="module-small-content-title">
                我在马路边捡到一分钱，把它交给
              </p>
            </div>
            <div class="child">
              <span class="iconfont icon-point">&#xe757;</span>
              <p class="module-small-content-title">
                我在马路边捡到一分钱，把它交给
              </p>
            </div>
            <div class="child">
              <span class="iconfont icon-point">&#xe757;</span>
              <p class="module-small-content-title">
                我在马路边捡到一分钱，把它交给
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <li class="child">
        <span class="iconfont icon-point">&#xe757;</span>
        <p class="module-small-content">
          我在马路边捡到一分钱，把他交给警察叔叔
        </p>
      </li>
      <li class="child">
        <span class="iconfont icon-point">&#xe757;</span>
        <p class="module-small-content">
          我在马路边捡到一分钱，把他交给警察叔叔手里
        </p>
      </li>
      <li class="child">
        <span class="iconfont icon-point">&#xe757;</span>
        <p class="module-small-content">
          我在马路边捡到一分钱，把他交给警察叔叔手里面quya123
        </p>
      </li>
    </ul> -->
  </div>
</template>

<script>
import MedicalModule from '@/components/medicalModule.vue'
export default {
  name: "Medical",
  props: ["moduleName",'GList','DList','TList','NList'],
  components:{MedicalModule},
  methods:{
    goModule(route){
      let link = this.$router.resolve({
        path: route,
      });
      window.open(link.href, "_blank");
    },
  }
};
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.module-name {
  display: inline-block;
  font-size: 18px;
  padding-left: 10px;
  padding-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  &:hover {
    color: @themeColor;
  }
  .icon {
    font-size: 26px;
  }
  .icon-tradition {
    color:#8cd0fa;
  }
  .icon-modern {
    color:#d3676d;
  }
}
.module-small {
  margin-bottom: 20px;
  text-align: left;
  list-style: none;
  border: 0.1px solid #d7d7d7;
  padding: 5px;
  .medical-img {
    width: 160px;
    height: 90px;
    margin-left: 10px;
  }
  .module-small-title {
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    margin-left: 5px;
    padding-left: 5px;
    border-left: 3px solid @themeColor;
    &:hover {
      color: @themeColor;
    }
  }
  .module-small-content-out {
      margin-top: 10px;
  }
  .child {
    margin-bottom: 5px;
    text-align: left;
    .module-small-content-title {
      display: inline-block;
      vertical-align: bottom;
      font-size: 15px;
      width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-point {
      color: #e1e1e1;
    }
    .module-small-content {
      display: inline-block;
      vertical-align: bottom;
      font-size: 15px;
      width: 380px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      &:hover {
        color: @themeColor;
      }
    }
    .icon-hot {
      margin-left: 10px;
      color: #ed4c52;
    }
    .hot-number {
      font-size: 14px;
    }
  }
}
</style>